<!--
* @description 参数1
* @fileName 02.响应式属性
* @author userName
* @date 2024-01-23 09:17:52
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>02.响应式属性</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 
            {0,"xxx",1:'xxx'}   value,index in arr
            {key01,"xxx",key02:'xxx'}   value,key in arr

         -->
        <ul>
            <li v-for="(value,key) in user" :key="key">
                {{key}} - {{value}}
            </li>
        </ul>
        <button @click="handlerAddAttr">添加属性</button>
        <button @click="handlerRemoveAttr">移除属性</button>
        <button @click="handlerChangeData">修改数据</button>
       
    </div>

    <script>
        var vm = new Vue({
            data:{
                user:{
                    name:"小明",
                    age:18
                }
            },
            methods:{
                handlerRemoveAttr() {
                    // delete this.user.address
                    // 移除响应式字段
                    this.$delete( this.user,"address")

                },
                handlerAddAttr() {
                    // this.user.name = "小红"
                    // // 添加普通属性
                    // this.user.address = "南京市"
                    this.$set( this.user,"address","南京市")
                },
                handlerChangeData() {
                    this.user.name = "小红"
                    this.user.address = "北京市"
                   
                }
            }
        });
        console.dir(vm);
        vm.$mount("#app")
    </script>
</body>

</html>